import React, { Component } from 'react';
import { Button, Icon, Card, List } from "antd";
import "./productinfo.less"
import { CategoryName } from "../../../api/index"
class ProductInfo extends Component {
    constructor(props) {
        super(props);
        this.proCategory = []
    }
    state = {
        name:null,
        child:null
    }

    componentDidMount() {
        this.getcategory();
    }

    getcategory = async () => {
        const { proCategory } = this.props.location.product;
        let name;
        for (var i = 0; i < proCategory.length; i++) {
            name = await CategoryName({ _id :proCategory[i]})
            this.proCategory.push(name);
        }
        if(this.proCategory.length>1){
            this.setState({
                name:this.proCategory[0],
                child:this.proCategory[1]
            })
        }else{
            this.setState({
                name:this.proCategory[0]
            })
        }
    }

    // 返回商品管理页面
    back = () => {
        this.props.history.push("/admin/product/")
    }

    render() {

        const { proPictures, proName, proIntro, proPrice, proDes } = this.props.location.product;

        const{name ,child} =this.state;

        const title = (
            <span>
                <Button type="primary" onClick={this.back}>
                    <Icon type="left"></Icon>
                    返回
                </Button>
                <span style={{ marginLeft: 20 }}>
                    当前页面：<span style={{ color: "#3D628D", fontSize: 20 }}>商品详情页</span>
                </span>
            </span>
        )
        return (
            <div>
                <Card title={title} style={{ border: "none" }}>
                    <List
                        size="large"
                        bordered>
                        <List.Item>
                            <span className="left">商品名称：</span>
                            <span className="right">{proName}</span>
                        </List.Item>
                        <List.Item>
                            <span className="left">商品简介：</span>
                            <span className="right">{proIntro}</span>
                        </List.Item>
                        <List.Item>
                            <span className="left">商品价格：</span>
                            <span className="right">￥{proPrice}</span>
                        </List.Item>
                        <List.Item>
                            <span className="left">商品图片：</span>
                            <span className="right">
                                {proPictures.length ? proPictures.map((item, index) => {
                                    return <img className="infoimg" src={item} alt="" key={index} />
                                }) : "暂无图片"}
                            </span>
                        </List.Item>
                        <List.Item>
                            <span className="left">商品分类：</span>
                            <span className="right">
                                {child?name+"-->"+child:name}
                            </span>
                        </List.Item>
                        <List.Item>
                            <span className="left">商品描述：</span>
                            <span className="right" dangerouslySetInnerHTML={{ __html: proDes }}></span>
                        </List.Item>
                    </List>
                </Card>
            </div>
        );
    }
}

export default ProductInfo;